/* eslint-disable */
import React from 'react'
import Header from '@/components/Header/index'
import { message, Tabs } from 'antd'
import  './index.scss'
import {queryMessageList} from '@/api/message'
import ContentList from './components/messageList'

interface IProps{ }
interface IState{
    message: string;
    systemMessageList: any[];
    commentMessageList: any[];
    praiseMessageList: any[];
    attentionMessageList: any[];
    tabKey: string;
    tabMsgType: string;
    [x: string]: any;
 }

const { TabPane } = Tabs
class Index extends React.Component<IProps,IState> {
    constructor(props) {
        super(props)
        this.state={
            message:'12',
            systemMessageList:[],
            commentMessageList:[],
            praiseMessageList:[],
            attentionMessageList:[],
            tabKey:'1',
            tabMsgType:'comment', // 当前tab菜单
        }
    }
    componentDidMount(){
       this.getMessageList('comment')
    }
    getMessageList = async (type)=>{ // 获取消息列表
      const res:any = await  queryMessageList({
            pageSize:10,
            pageNum:1,
            type:type
        })
        if(res.code == 200){
          await  this.setState({[type+'MessageList']:res.rows})
          console.log(this.state)
        }else{
            message.error('消息获取失败')
        }
    }
    refreshMessage=()=>{ // 刷新当前tab页消息
        this.getMessageList(this.state.tabMsgType)
    }
    tabChange =(key)=> {
        if(key==1){
            if(!this.state.commentMessageList.length){
                this.getMessageList('comment') // 初次加载获取消息列表
            }
            this.setState({tabMsgType:'comment'})
        }else if(key==2){
                if(!this.state.praiseMessageList.length){
                   this.getMessageList('praise')  
                }
            this.setState({tabMsgType:'praise'})
        }else if(key==3){
            if(!this.state.attentionMessageList.length){
                 this.getMessageList('attention')
            }
            this.setState({tabMsgType:'attention'})
        }else if(key==4){
            if(!this.state.systemMessageList.length){
                this.getMessageList('system')
            }
            this.setState({tabMsgType:'system'})
        }
        console.log(key);
      }
    render() {
        return (
            <div >
                <Header></Header>
                <div className='message-content'>
                    <Tabs defaultActiveKey="1" onChange={this.tabChange}>
                    <TabPane tab="评论消息" key="1">
                        <ContentList messageType='comment' commentMessageList={this.state.commentMessageList} parent={this}></ContentList>
                    </TabPane>
                    <TabPane tab="点赞消息" key="2">
                    <ContentList messageType='praise' praiseMessageList={this.state.praiseMessageList} parent={this}></ContentList>
                    </TabPane>
                    <TabPane tab="关注消息" key="3">
                    <ContentList messageType='attention' attentionMessageList={this.state.attentionMessageList} parent={this}></ContentList>
                    </TabPane>
                    <TabPane tab="系统消息" key="4">
                    <ContentList messageType='system' systemMessageList={this.state.systemMessageList} parent={this}></ContentList>
                      
                    </TabPane>
                </Tabs>
                </div>
                
            </div>
        )
    }
}
export default Index